<!--组件获取上级可选的入参-->
<template>
  <div class="node_input_source_data_component">
    <el-select
        v-if="showFlow"
        v-model="ParamNameKey"
        :placeholder="placeholder"
        @change="FlowChange"
        size="small"
        clearable
    >
      <el-option
          v-for="item in flowListDetailDataMixin"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      >
      </el-option>
    </el-select>
    <el-tag
        type="info"
        :class="[SelectedDatasource?.DataSource===AppParams.DATA_SOURCE_TYPE.GLOBAL_PARAM?'global-param-tip':'','c-param-tip']"
    >
      {{ nodeId }}
    </el-tag>
    <el-select
        allow-create default-first-option filterable v-model="ParamNameKey" :placeholder="placeholder" size="small"
        clearable :filter-method="FilterInput" @change="ParamNameChange">
      <el-option
          v-for="item in nodeInputParamsMixin"
          v-show="FilterValue==null||(item.nodeId+'').includes(FilterValue)"
          :key="item.key"
          :label="item.ParamName"
          :value="item.key"
      >
        <span style="float: left; color: #8492a6; font-size: 13px">
          <el-tag class="margin-right-5"
                  v-if="item.DataSource===AppParams.DATA_SOURCE_TYPE.GLOBAL_PARAM">全局</el-tag>
          {{ item.nodeId }}
        </span>
        <span style="float: right">{{ item.ParamName }}</span>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import NodeConfigMixin from '../../../libs/NodeConfigMixin'
import Utils from '../../../utils/Common'
import { GetAllFlowNodeDetailInfoDebounce } from '@/api/flow/flow'
import { AppParams } from '@/utils/appParams'

export default {
  computed: {
    AppParams () {
      return AppParams
    }
  },
  mixins: [NodeConfigMixin],
  name: 'NodeInputSourceDataComponent',
  props: {
    placeholder: {
      type: String,
      default: '请选择来源'
    },
    datasourceItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    nodeId: {
      type: Number,
      default: null
    },
    paramName: {
      type: String,
      default: ''
    },
    showFlow: {
      type: Boolean,
      default: false
    },
    NullMessage: {
      type: String,
      default: null
    },
    WidthSize: {
      type: String,
      default: '255px',
    }
  },
  watch: {
    nodeId (v, o) {
      this.SetKey()
    },
    paramName (v, o) {
      console.log('paramName:' + v)
      // this.SetKey()
    },
    NullMessage (v, o) {
      if (!Utils.IsEmpty(v)) {
        //  this.SetKey()
      }
    }
  },
  data () {
    return {
      FlowId: null,
      ParamNameKey: null,
      FilterValue: null,
      SelectedDatasource: {}
    }
  },
  methods: {
    FilterInput (v) {
      this.FilterValue = v
    },
    SetKey () {
      if (this.showFlow) {
        GetAllFlowNodeDetailInfoDebounce((res) => {
        })
      }
      this.$nextTick(() => {
        if (!Utils.IsEmpty(this.nodeId) && !Utils.IsEmpty(this.paramName)) {
          const GLOBAL_PARAM = AppParams.DATA_SOURCE_TYPE.GLOBAL_PARAM
          let _Key = `${this.nodeId}_${this.paramName}`
          if (this.datasourceItem.DataSource === GLOBAL_PARAM) {
            _Key = `${this.nodeId}_${GLOBAL_PARAM}_${this.paramName}`
          }
          let Select = this.nodeInputParamsMixin.find(s => s.key === this.ParamNameKey)
          if (!Select) {
            _Key = `${this.paramName}`
          }
          this.ParamNameKey = _Key
          this.SetDatasource()
        }
      })
    },
    /**
     * 切换流程事件
     * @param id
     * @constructor
     */
    FlowChange (id) {
      // const item = this.flowListDetailDataMixin.find(f => f.id === id)
    },
    /**
     * 参数切换选择事件
     * @param item
     * @constructor
     */
    ParamNameChange (item) {
      this.SetDatasource()
      this.$emit('change', this.SelectedDatasource)
    },
    SetDatasource () {
      if (Utils.IsEmpty(this.ParamNameKey)) {
        this.SelectedDatasource = {}
        return
      }
      let Select = this.nodeInputParamsMixin.find(s => s.key === this.ParamNameKey)
      if (!Select) {
        const CUSTOM_PARAM = AppParams.DATA_SOURCE_TYPE.CUSTOM_PARAM
        Select = { DataSource: CUSTOM_PARAM, ParamName: this.ParamNameKey, nodeId: -99 }
      }
      this.SelectedDatasource = Select
    }
  },
  created () {
    // this.SetKey()
    this.$watch('paramName', (v, o) => {
      this.SetKey();
    });
  },
  mounted () {
    // this.SetKey()
    this.$nextTick(() => {
      // 重新渲染子组件，传递更新后的ParamName值
      this.SetKey();
      this.$forceUpdate();
    });
  }
}
</script>

<style lang="less" scoped>
.node_input_source_data_component {
  display: flex;
  align-items: center;
  width: 90%;

  .c-param-tip {
    margin-right: 4px;
  }

  .global-param-tip {
    background-color: #409eff;
    color: #fff;
  }

  .global-param-tip:before {
    content: '全';
    color: #fff;
  }

  .el-select {
  }
}
</style>
